<template>
    <el-container class="sys_role_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="queryData"
                                @event="handleHeaderEvent">
                </headerTemplate>
                <div class="card_content">
                    <vxeTableTemplate :data="dataList" :options.sync="tableOptions"
                                      @event="handleTableEvent" />
                </div>
            </el-card>

            <component-dialog dialog-drag :options="componentDialogOption" />
        </el-main>
    </el-container>
</template>

<script>
import poiApi from "@common/api/poiApi";
import sysRoleApi from "@common/api/system/sysRoleApi";
import RoleForm from "../dialog/role/RoleForm";
import RoleAccessRule from "../dialog/role/RoleAccessRule";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "SysRole",
    data() {
        let $this = this;
        return {
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            $this.getList();
                        },
                    },
                    {
                        id: "add",
                        type: 'primary',
                        icon: "fa fa-plus",
                        show: true,
                        permission: 'system:role:save',
                        method: () => {
                            $this.openDialog(null, 'add');
                        },
                    },
                    {
                        id: "edit",
                        type: 'success',
                        icon: "fa fa-pencil",
                        show: true,
                        permission: 'system:role:save',
                        method: () => {
                            $this.openDialog(null, 'edit');
                        },
                    },
                    {
                        id: "del",
                        type: 'danger',
                        icon: "fa fa-trash-o",
                        show: true,
                        permission: 'system:role:delete',
                        method: () => {
                            $this.delRole(null, 'batch');
                        },
                    },
                ],
                toolbar_filter: [
                ],
            },
            dataList: [],
            selectionList: [],
            tableOptions: {
                ref: 'RoleTable',
                container: '.sys_role_container',
                multiSelect: true,
                checkboxConfig: {
                    visibleMethod({ row }) {
                        return row.sid !== 'admin';
                    },
                    checkMethod({ row }) {
                        return row.sid !== 'admin';
                    },
                },
                columns: [
                    {
                        label: '角色编码',
                        prop: 'code',
                        align: 'center',
                    },
                    {
                        label: '角色名称',
                        prop: 'name',
                        align: 'center',
                    },
                ],
                operates: {
                    list: [
                        {
                            id: 'info',
                            icon: 'fa fa-pencil',
                            type: 'success',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '编辑',
                            },
                            permission: 'system:role:save',
                            method: (index, row) => {
                                $this.openDialog(row, 'edit');
                            }
                        },
                        {
                            id: 'info',
                            icon: 'fa fa-trash-o',
                            type: 'danger',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '删除',
                            },
                            permission: 'system:role:delete',
                            filter(row) {
                                return row.sid !== 'admin';
                            },
                            method: (index, row) => {
                                $this.delRole(row)
                            }
                        },
                        {
                            id: 'info',
                            icon: 'el-icon-circle-plus',
                            type: 'primary',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '数据访问权限',
                            },
                            permission: 'system:role:dataRule',
                            method: (index, row) => {
                                $this.openRoleDataAccessRuleDialog(row);
                            }
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                }
            },
            queryData: {},
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        handleHeaderEvent(event) {
            const _this = this;
            _this.queryData = $.extend({}, _this.queryData, event.searchForm);
            if (event.type === "search") {
                _this.getList(true);
            } else if (event.type === "refresh") {
                _this.getList(true);
            }
        },
        getList(init) {
            let $this = this;
            $this.dataList = [];
            if (init) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            let queryData = $this.getQueryParams($this.tableOptions, $this.queryData);
            queryData.with_resource = '1';
            sysRoleApi.findSysRoles(queryData, result => {
                $this.dataList = result.data || [];
                $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
            })
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        //新增/编辑
        openDialog(row, type) {
            let $this = this;
            let title = type === 'add' ? '创建' : '编辑';
            let user_sid_list = [];
            let resource_list = [];
            let rowData = {};
            if (type === 'edit') {
                if (row) {
                    let obj = {
                        id: row.id,
                        sid: row.sid,
                        name: row.name,
                        code: row.code,
                    };
                    resource_list = row.resource_list;
                    if ($this.$utils.isNotEmpty(row.user_sid)) {
                        if (row.user_sid.indexOf(',') > 0) {
                            user_sid_list = row.user_sid.split(',');
                        } else {
                            user_sid_list.push(row.user_sid)
                        }
                    }
                    rowData = $.extend({}, obj, {
                        user_sid_list: user_sid_list,
                    });
                } else {
                    if (!$this.checkSelection($this.selectionList)) {
                        return;
                    }
                    let obj = {
                        id: $this.selectionList[0].id,
                        sid: $this.selectionList[0].sid,
                        name: $this.selectionList[0].name,
                        code: $this.selectionList[0].code,
                    };
                    resource_list = $this.selectionList[0].resource_list;
                    if ($this.$utils.isNotEmpty($this.selectionList[0].user_sid)) {
                        if ($this.selectionList[0].user_sid.indexOf(',') > 0) {
                            user_sid_list = $this.selectionList[0].user_sid.split(',');
                        } else {
                            user_sid_list.push($this.selectionList[0].user_sid)
                        }
                    }
                    rowData = $.extend({}, obj, {
                        user_sid_list: user_sid_list,
                    });
                }
            }
            $this.openComponentDialog({
                width: '600px',
                title,
                component: RoleForm,
                propsData: {
                    row: rowData,
                    resource_list,
                },
                callback() {
                    $this.getList();
                    $this.$bus.$emit('updateSystemDashboard');
                },
            });
        },
        //删除
        delRole(row, type) {
            let $this = this;
            let ids = [];
            if (type === 'batch') {
                if ($this.selectionList.length === 0) {
                    $this.$message.error("请选中一条数据");
                    return;
                } else {
                    ids = $this.selectionList.map(item => item.id);
                }
            } else {
                ids.push(row.id);
            }
            $this.confirmDel(ids);
        },
        confirmDel(ids) {
            let $this = this;
            $this.$confirm("是否确认删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                sysRoleApi.batchDelSysRole({ ids }, () => {
                    $this.getList();
                    $this.$message.success("删除成功");
                    $this.$bus.$emit('updateSystemDashboard');
                })
            }).catch(() => {
            });
        },
        //数据访问规则/新增/编辑
        openRoleDataAccessRuleDialog(row) {
            let $this = this;
            $this.openComponentDialog({
                width: '800px',
                title: '数据访问权限',
                component: RoleAccessRule,
                propsData: {
                    row,
                },
                callback() {
                    $this.getList();
                },
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.sys_role_container {
    height: 100%;

    .buttons {
        margin: 0 0 10px 0;
    }

    .ceshi {
        max-height: 500px !important;
        z-index: 1000;
    }
}
</style>
